<div id="Main" class="margin">
    <div class="location">
        <!-- <a href="/src/index.html">首頁</a>&nbsp;<em>&gt;</em>&nbsp;
        <a href="#">Origins</a>&nbsp;<em>&gt;</em>&nbsp;
        <a href="#">面部护理</a>&nbsp;<em>&gt;</em>&nbsp;
        <a href="#">精华</a>&nbsp;<em>&gt;</em>&nbsp;
        <a href="#">精华液</a>&nbsp;<em>&gt;</em>&nbsp;
        <b>灵芝焕能精华水 菌菇水 (200ml)</b> -->
    </div>
    
    <div class="detail-info mt-10">
        <div class="left">
            <div class="top-pic" id="big_pic" align="center" >
                <!-- <img src="/src/img/shoppinglist1-1.jpg">
                <div class="mirro"></div> -->
            </div>

            <div class="mt-10" style="overflow:hidden">
                <a href="#" class="btn-collect" style="margin-left:16%;"></a>
                <a href="#" class="btn-comment" style="margin-left:25px;"></a>  
            </div>

            <div class="detail-roll mt-10" id="detail_roll_block">
                <div class="content">
                  <a href="javascript:void(0)" class="prevbtn"></a>
                  <a href="javascript:void(0)" class="nextbtn"></a>
                  <ul id="detail-slide" style="list-style: none; padding: 0px; position: absolute;left: 18px; overflow: hidden; width: 340px; height: 75px;">
                     <!-- <div class="slide_inner">
                        <li class="slide-node select-border">
                            <div class="item">
                              <img src="./img/shoppinglist1-1.jpg">
                            </div>
                        </li>
                        <li class="slide-node">
                            <div class="item">
                              <img src="./img/shoppinglist1-2.jpg">
                            </div>
                        </li>
                        <li class="slide-node">
                            <div class="item">
                              <img src="./img/shoppinglist1-3.jpg">
                            </div>
                        </li>
                        <li class="slide-node">
                            <div class="item">
                              <img src="./img/shoppinglist1-4.jpg">
                            </div>
                        </li>
                        <li class="slide-node">
                            <div class="item">
                              <img src="./img/shoppinglist1-5.jpg">
                            </div>
                        </li>
                        <li class="slide-node">
                            <div class="item">
                              <img src="./img/shoppinglist1-6.jpg">
                            </div>
                        </li>
                        <li class="slide-node">
                            <div class="item">
                              <img src="./img/shoppinglist1-7.jpg">
                            </div>
                        </li>
                        <div class="clr"></div>
                     </div> -->
                  </ul>
                 
                </div>
            </div>
            <div class="detail-bigpic">

            </div>
        </div>
        <div class="right">
            <div class="title">
                <!-- <a href="#"><span itemprop="brand">悦木之源</span></a><br>
                <a href="#" target="_blank">
                    <span itemprop="name">灵芝焕能精华水 菌菇水 (200ml)</span>
                </a> -->
            </div>

            <div class="content">
            	<!-- <div>产品号码︰108698402001</div>
                <div>现   价：<big>HK$153.0</big></div>
            	<div>建议价：HK$ 320.0</div>
            	<div>折   扣：4.8折</div>
            	<div>规   格：200 ml  </div>
                <div>功   效：
                    <span class="intro-list">
                        <span>抗敏感</span>
                        <span>去红血丝</span>
                        <span>中性</span>
                        <span>油性</span>
                    </span>
                </div>
            	<div><p style="float:left">评   分：</p>
                 - （0篇产品评价）
                </div> -->
            	
            </div>

            <div class="detail-size">
                <form name="frm10107840" method="POST" action="#">
                    <dl class="number-box">
                        <dt>购买（数量）：</dt>
                        <dd>    
                            <span class="decrease_num">-</span>
                            <input type="text" class="text quantity" value="1" maxlength="2">
                            <span class="increase_num">+</span>
                        </dd>
                    </dl>
                    <div style="margin:15px 0 0 98px;">
                        <img src="./img/detail-info-cart.gif" width="150" height="51" class="add_cart" style="cursor:pointer" alt="立即购买！">
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div id="Detail" class="mt-15">
        <div class="left">
            <div id="inner-left" style="padding-bottom:5px;"></div>
        </div>

        <div class="right">
            <div id="sticky-nav" class="sticky">
            	<div class="nav-container">
                	<div class="nav-content">
                		<a href="#chapter-1" class="choose">商品规格</a>
                		<a href="#chapter-2" class="">产品描述</a>
                		<a href="#chapter-3" class="">用户评价</a>
                		<a href="#">回到页首</a>
					</div>
                    <div class="nav-notice">
                        <span class="box_left"></span>
                        <span class="box_text"><big>HK$153.0</big>
                            <a class="button" title="加入购物车"></a>
                        </span>
                        <span class="box_right"></span>
                    </div>
                </div>
            </div>
            <div class="detail-item" id="chapter-1">
                <div class="title">商品规格</div>
                <div class="content">
                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
                        <tbody>
                            <tr>
                                <td width="33%" style="padding: 5px;">商品名称：
                                    <a href="#">悦木之源</a> 
                                    <a href="#" target="_blank">灵芝焕能精华水 菌菇水 (200ml)</a>
                                </td>
                                <td width="33%" style="padding: 5px;">商品编号：108698402001</td>
                                <td width="34%" style="padding: 5px;">品牌：
                                    <em class="fon-pink"><a href="#">悦木之源</a></em>
                                </td>
                            </tr>
                            <tr>
                                <td style="padding: 5px;">功效：
                                    <span>抗敏感</span><span>去红血丝</span>
                                    <span>中性</span><span>油性</span>
                                </td>
                                <td style="padding: 5px;">类别：精华液</td>
                                <td style="padding: 5px;">商品毛重：200 ml</td>
                            </tr>
                            <tr>
                                <td style="padding: 5px;"></td>
                                <td style="padding: 5px;"></td>
                                <td style="padding: 5px;"></td>
                            </tr>
                        </tbody>
                    </table>
                <p>&nbsp;</p>
              </div>
            </div>
            <div class="detail-item" id="chapter-2">
                <div class="title">产品介绍</div>
                <div class="content">
                    <p>
                        <strong>【悦木之源 韦博士灵芝焕能系列 韦博士灵芝焕能精华水】(200毫升) </strong>
                        <br>这是帮助您还原无瑕肌底的精华水。成分中有多种菇菌，帮助提升肌肤的抗逆力，能舒缓敏感红肿的问题，改善炎症过敏的情况。灵芝发现自长白山，当地常年严寒、无需土壤，亦可培育出上品赤芝，蕴含着强大的自愈能力；加上在古希腊有"神果"之称的沙棘果，具卓效抗氧化元素、维他命C及E，有效修护灼伤或日光等侵害。
                        <br><br>商品特点：<br>	从外安抚、从内修护：安抚脆弱的皮肤，并从内修护受损了的肌底，给您还原本来美丽的肌肤状态。
                        <br>	预防炎症：灵芝菇菌及草本成分有实时纾缓敏感之功效，帮助预防敏感炎症。<br>	大师出品：由哈佛大学医学院的Dr. Andrew Weil韦博士亲自研发。<br>
                    </p>
                </div>

            </div>

            <div class="detail-item">
            	<div class="title">使用方法</div>
                <div class="content">
                	<p>使用前先摇匀。洗完面，用化妆棉拿取适度分量的灵芝焕能精华水，轻拍全面。</p>
                </div>
            </div>

            <div class="detail-item">
            	<div class="title">成份</div>
                <div class="content">
                	<p>灵芝：由内还原健康肌底。沙棘果：舒缓敏感、安抚脆弱肌肤。冬虫夏草：深入滋养肌底、强韧肌肤屏障。</p>
                </div>
            </div>

            <div class="detail-item">
            	<div class="title">适合肤质</div>
                <div class="content">
                	<p>油及暗疮性皮肤 / 中性皮肤</p>
                </div>
            </div>

            <div class="detail-item" id="chapter-3">
            	<div class="title">用户评价</div>
                <div class="content">
                	<div class="report-wrap">  
                    </div>
                </div>
            </div>
        </div>

        <div class="clear"></div>
    </div>
</div>
<!-- 动态更改详情页内容  数据驱动显示 -->
<script>
        $(function(){
            function sendAjax(url,obj,fn){
                $.ajax({
                    url: url,
                    type: "post",
                    headers: {
                        token: localStorage.getItem("token")
                    },
                    data: obj,
                }).then(function(res){
                    fn(res);
                })
            }
            function addScript(url){
                var script = document.createElement('script');
                script.setAttribute('type','text/JavaScript');
                script.setAttribute('src',url);
                document.getElementsByTagName('head')[0].appendChild(script);
            }
            //发送之前的拦截器 
            axios.interceptors.request.use(function (config) {
                config.baseUrl = "http://127.0.0.1:8585";
                //发送之前,读取token
                config.headers.token = localStorage.getItem("token")
                return config;
            });

            axios({
                url: "/api/index",
                method: "get",
            }).then(function (res) {
                if(res.data.status==-200){
                    console.log(res);
                    layer.confirm('您还没有登录,请先登录或注册', {btn: ['登录','注册']}, function(){
                         layer.msg("即将跳转到登录页面");
                         setTimeout(function(){
                            javascrtpt:window.location.href='http://localhost:8585/login.html'
                        },1000)
                    }, function(){
                        layer.msg("即将跳转到注册页面");
                        setTimeout(function(){
                            javascrtpt:window.location.href='http://localhost:8585/register.html'
                        },1000)
                    });
                    $("#Main").css("opacity",0);
                    return;
                }
                var arr=[...res.data.data];
                var searchId=location.search.slice(5);
                var targetGood=arr.filter((item,index)=>{
                    if(item.gid==searchId) return index;
                })
                targetGood=targetGood[0];
                // 位置条
                var loca=`<a href="/src/index.html">首頁</a>&nbsp;<em>&gt;</em>&nbsp;
                    <a href="#">${targetGood.gbrand}</a>&nbsp;<em>&gt;</em>&nbsp;
                    <a href="#">${targetGood.gposition[0]}</a>&nbsp;<em>&gt;</em>&nbsp;
                    <a href="#">${targetGood.gposition[1]}</a>&nbsp;<em>&gt;</em>&nbsp;
                    <a href="#">${targetGood.gposition[2]}</a>&nbsp;<em>&gt;</em>&nbsp;
                    <b>${targetGood.gtitle}</b>`;
                $(".location").html(loca);
                // 放大镜小图标
                var slideInner=`<div class="slide_inner">`;
                for(let i=0;i<targetGood.giconimgsrc.length;i++){
                    if(i==0){
                        slideInner+= `<li class="slide-node select-border">`;
                    }else {
                        slideInner+= `<li class="slide-node">`;
                    }
                    slideInner+= `<div class="item"><img src="${targetGood.giconimgsrc[i]}"></div></li>`;
                }
                slideInner+=`</div>`;
                $("#detail-slide").html(slideInner);
                // 图片显示区域
                var showPic=`<img src="${targetGood.giconimgsrc[0]}"><div class="mirro"></div>`
                $("#big_pic").html(showPic);  
                // 商品信息
                var conMsg=`<div>产品号码︰${targetGood.gid}</div>
                            <div>现   价：<big>HK$${targetGood.gnowpirce}</big></div>
                            <div>建议价：HK$ ${targetGood.goldpirce}</div>
                            <div>折   扣：${targetGood.gdiscount}折</div>
                            <div>规   格：${targetGood.gspecification}  </div>
                            <div>功   效：<span class="intro-list">`;
                for(let j=0;j<targetGood.geffect.length;j++){
                    conMsg+=`<span>${targetGood.geffect[j]}</span>`;
                }
                conMsg+=`</span></div><div><p style="float:left">评   分：</p>
                        - （0篇产品评价）</div>`;
                $(".detail-info .right .content").html(conMsg);
                // 商品标题
                var goodTitle=`<a href="#"><span itemprop="brand">${targetGood.gbrand}</span></a><br>
                        <a href="#" target="_blank"><span itemprop="name">${targetGood.gtitle}</span></a>`;
                $(".detail-info .right .title").html(goodTitle);
                $(".add_cart").data("info",JSON.stringify(targetGood));
                showSmallCart();
                addScript("./js/detial.js");
                

                $(".add_cart").on("click",function () {
                    var data = JSON.parse($(this).data('info'));
                
                    delete(data.gdiscount);
                    delete(data.geffect);
                    delete(data.goldpirce);
                    delete(data.gposition);
                    delete(data.gspecification);
                    //添加购买数量
                    data.num = $(".quantity").val();
                    //添加购物人
                    data.uid = JSON.parse(localStorage.getItem("users")).uId;
                    //修改购物车内的显示图片
                    data.giconimgsrc = data.giconimgsrc[0];
                    console.log(data)
                    //把data 通过ajax发送到 后台
                    $.ajax({
                        url: "./api/addCart",
                        type: "post",
                        data: data,
                        headers: {
                            token: localStorage.getItem("token")
                        },
                    }).then(function (res) {
                        layer.msg("已成功加入购物车");
                        showSmallCart();
                    })

                })
                



                function showSmallCart(){
                    sendAjax("./api/getCart",{uid: JSON.parse(localStorage.getItem("users")).uId},function(res){
                        if (!res.data) {
                            $("#cart-box").find(".content_null").css("display","block").siblings(".content_catalog").css("display","none")
                            $("#cart-box").find(".shop-cart").children("em").text("0");
                            return;
                        }else{
                            // console.log(res.data);
                            let cartList=res.data;
                            // console.log(cartList)
                            let smallCartsSumpirce=0;
                            let smallCartsSumlength=0;
                            $("#cart-box").find(".shop-cart").children("em").text(cartList.length);
                            $("#cart-box").find(".content_null").css("display","none").siblings(".content_catalog").css("display","block")
                            var cartStr=`<ul id="shoppingCartDetails"><!-- 每一个li 是一个购物车内的商品 -->`;
                            cartList.forEach((item,index)=>{
                                cartStr+=`<li class="border-dashed"><!-- left 是一个图片 --><span class="box_left"><a href="./detail.html?gid=${item.gid}">`;
                                cartStr+=`<img src="${item.giconimgsrc}" ></a></span><!-- right 有品牌 标题 价格 数量 --><span class="box_right">`;
                                cartStr+=`<h1><a href="javascript:;">${item.gbrand}</a><br><a href="javascript:;">${item.gtitle}</a></h1><b class="fon-price">`;
                                cartStr+=`HK$<span>${item.gnowpirce}</span><em> x ${item.num}</em></b><a class="btn-delete" data-info='${JSON.stringify(item)}'>X</a></span></li></ul>`;
                                smallCartsSumpirce+=item.gnowpirce*item.num;
                                smallCartsSumlength+=item.num;
                            });
                            cartStr+=`</ul>`;
                            $(".rank-list").html(cartStr);

                            let cartMsgStr=`<div class="fon-price" align="left" style="width:40%">&nbsp;<span class="fon-MSYH">共</span>`;
                                cartMsgStr+=`&nbsp;<b><span id="basketitem">${smallCartsSumlength}</span></b>&nbsp;<span class="fon-MSYH">件商品</span></div>`;
                                cartMsgStr+=`<div class="fon-price" align="right" style="width:60%"><span class="fon-MSYH">共计：</span>`;
                                cartMsgStr+=`<b>HK$<span id="baskettotal">${smallCartsSumpirce}</span></b></div><a href="./shoppingCar.html">`;
                                cartMsgStr+=`<div class="btn_checkout">查看购物车</div></a>`;      
                            $(".content_notice").html(cartMsgStr);
                            $(".rank-list").on("click",".btn-delete",function(){
                                var self = this;
                                var cid = $(this).data("info").cid;
                                var delNum= $(this).data("info").num;
                                var delPirce= ($(this).data("info").gnowpirce)*delNum;
                                console.log(cid,delNum,delPirce)
                                layer.confirm('是否将该商品从购物车中删除?', {btn: ['确认','取消'] }, 
                                    function(){
                                        sendAjax("./api/delete",{cid},function(res){
                                            layer.msg("删除成功");
                                            $(self).parents(".border-dashed").remove();
                                            setTimeout(function(){
                                                console.log(res);
                                                $("#basketitem").text($("#basketitem").text()-delNum);
                                                $("#baskettotal").text($("#baskettotal").text()-delPirce);
                                                var cartxtNum=$("#cart-box").find(".shop-cart").children("em").text();
                                                if(cartxtNum!=0){
                                                    $("#cart-box").find(".shop-cart").children("em").text(cartxtNum-1);
                                                    if(cartxtNum==1){
                                                        $("#cart-box").find(".shop-cart").children("em").text(0)
                                                        $("#cart-box").find(".content_null").css("display","block").siblings(".content_catalog").css("display","none");
                                                    }
                                                }
                                            },100);
                                        })
                                    }, function(){return;}
                                );
                            });
                        }
                    })
                }


                
            })
        })


</script>




<!-- <script src="./js/detial.js"></script> -->
<script src="./js/stepNumber.js"></script>